<template>
	<view>
		<view class="content">
			<view class="bgImg">
				<image class="image" :src="hotRankBackground_url" mode=""></image>
			</view>
			<view class="details">
				<view class="horizontalRoll">
					<swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true" :current="swiper.index" @change="swiperChange">
						<swiper-item v-for="(item,index) in dataObject.lists" :key="index">
							<view class='le_info' :class="{'le_info_active':swiper.index == index}" @click="clickToInfo(index)">
								<image class="coverImg" :src="item.thumbnail||item.cover" mode="aspectFill"></image>
								<image class="playImg" src="/static/video/video-pause.png" mode=""></image>
								<video class="video" v-if="swiper.index === index"
								 style="border-radius: 10px;"
								 :loop="true"
								 :show-fullscreen-btn="false"
								 show-play-btn="true"
								 :enable-progress-gesture="false"
								 object-fit="fill"
								 :id="'video'+item.playlet_id"
								 :autoplay="isAutoPlay" 
								 :src="swiper.index === index ? item.play_url : ''" 
								 @play="playAction" @pause="pauseAction"></video>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="quanjiGuankan" @click="clickToJumpVideo">全集观看</view>
			</view>
		</view>
	</view>
</template>

<script>
    import images from '@/utils/images'	
	export default {
		data() {
			return{
				hotRankBackground_url: images.square_smallTheater_hotRankBackground,
				swiper: {
					margin: "250rpx",
					index: 0,
				},
				isAutoPlay: false,
				isVideoPlay: false,
				currentWindowHeight:0,
				isBeforeSwitchPlay: false //切换之前视频是否播放
			}
		},
		props:{
			dataObject: {
				type: Object,
				default: function(){
					return []
				}
			},
			scroll_y: {
				type: Number,
				default: 0
			},
			isCurrentSelf: {
				type: Boolean,
				default: false
			},
			scrollDefaultTop: {
				type: Number,
				default: 758
			}
		},
		watch: {
			dataObject: {
				handler(newVal) {
					if (newVal.lists != undefined) {
						let item = newVal.lists[this.swiper.index]
						let currentId = 'video' + item.playlet_id // 获取当前视频id
						this.videoContent = uni.createVideoContext(currentId, this)
					}
				},
				immediate: false  // 不用立即执行
			},
			scroll_y: {
				handler(newVal) {
					if (this.videoContent != null) {
						this.isVisibleArea(newVal)
					}
				},
				immediate: true
			},
			isCurrentSelf: {
				handler(newVal) {
					if (newVal === true) {
						if (this.isBeforeSwitchPlay) {
							this.isPlayVideoAction(true)
						} 
					} else{
						this.isBeforeSwitchPlay = this.isVideoPlay
						this.isPlayVideoAction(false)
					}
				},
				immediate: false // 不用立即执行
			}
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync()
			this.currentWindowHeight = systemInfo.windowHeight
			//console.log("currentWindowHeight:" + this.currentWindowHeight)
		},
		methods: {
			swiperChange(e) {			
				this.swiper.index = e.detail.current;
				if(this.isAutoPlay === false) {
					this.isAutoPlay = true
				}
				
				if(this.videoContent != null) {
					this.videoContent.stop()
				}			
				let item = this.dataObject.lists[this.swiper.index]
				// console.log("当前:", e.detail.current, item.play_url)
				let currentId = 'video' + item.playlet_id // 获取当前视频id
				this.videoContent = uni.createVideoContext(currentId, this)
				// this.videoContent.seek(0)
				// this.videoContent.play()
			},	
			clickToInfo(index){
				this.swiper.index = index;
			},
			clickToJumpVideo() {
				let info = this.dataObject.lists[this.swiper.index]
				this.$emit("clickToItem", info)
			},
			playAction() {
				this.isVideoPlay = true
			},
			pauseAction() {
				this.isVideoPlay = false
			},
			isPlayVideoAction(isPlay) {
				if (isPlay) {
					if (this.isVideoPlay === false) {
						this.videoContent.play()
					} 
				} else{
					if (this.isVideoPlay === true) {
						this.videoContent.pause()
					}
				}
			},
			isVisibleArea(y) {
				if (y >= this.scrollDefaultTop + 80) {
					this.isPlayVideoAction(false)
				} else {
					let currentScrollY = this.currentWindowHeight + y
					if (currentScrollY >= this.scrollDefaultTop) {
						this.isPlayVideoAction(true)
					} else {
						this.isPlayVideoAction(false)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		margin: 0px 15px;
		margin-bottom: 15px;
		height: 500rpx;
		position: relative;
		
		.bgImg {
			width: 100%;
			height: 100%;
			.image {
				width: 100%;
				height: 100%;
			}
		}
		
		.details {
			position: absolute;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			width: 100%;
			height: 100%;
			border-radius: 250rpx;
			align-items: center;
			
			.horizontalRoll{
				display: flex;
				box-sizing: border-box;
				width: 100%;
				height: 260rpx;
				margin-top: 110rpx;
				
				.swiper {
					width: 100%;
					height: 260rpx; 
					margin: 0 3rpx;
					
					.le_info {
						width: 100%;
						height: 100%;
						display: block;
						transform: scale(0.78);
						transition: transform 0.3s ease-in-out 0s;
						border-radius: 10px;
						.coverImg{
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							border-radius: 10px;
						}
						.playImg{
							position: absolute;
							width: 50rpx;
							height: 50rpx;
							left: 50%;
							top: 50%;
							transform: translate(-50%,-50%);
						}
						.video{
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
						}
							
						&.le_info_active {
							transform: scale(1);
						}
					}				
				}
			}
			
			.quanjiGuankan{
				width: 292rpx;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 16px;
				font-weight: 500;
				border-radius: 33rpx;
				margin-top: 40rpx;
				color: #3D3D3D;
				background-color: #F6BC8A;
				text-align: center;
			}
		}
		
		
	}
</style>